<template>
  <div>
    <Table size="small" border :columns="widgetEventCodeTableColumns" :data="widgetEventCodeTableData"></Table>

    <FormItemEventCodeEditor ref="formItemEventCodeEditor"
                             @confirm="formItemEventCodeEditorConfirmHandler"></FormItemEventCodeEditor>
  </div>
</template>

<script>
export default {
  name: "FormItemInteractionEditTable",
  props: {
    widgetEventCodeConfig: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      widgetEventCodeTableColumns: [
        {
          title: '交互事件',
          key: 'eventName',
          render: (h, params) => {
            return h('div', {
              style: {
                padding: '5px'
              }
            }, [
              h('p', {
                style: {
                  color: '#4caf50',
                  fontSize: '14px'
                }
              }, params.row.eventName),
              h('p', {
                style: {
                  textAlign: 'justify'
                }
              }, params.row.remark),
            ])
          }
        },
        // {
        //   title: '返回值',
        //   width: 75,
        //   key: 'resultValues',
        //   align: 'center'
        // },
        {
          title: '操作',
          width: 70,
          align: 'center',
          render: (h, params) => {
            return h('Button', {
              props: {
                size: 'small',
                type: 'default',
                icon: 'md-create'
              },
              'class': {

              },
              on: {
                click: () => {
                  this.openFormItemEventCodeEditor(params.row.eventName)
                }
              }
            });
          }
        },

      ],
      widgetEventCodeTableData: []
    }
  },
  mounted() {
    this.initWidgetEventCodeTable()
  },
  methods: {
    initWidgetEventCodeTable() {
      if (this.widgetEventCodeConfig != undefined) {
        for (let key in this.widgetEventCodeConfig) {
          this.widgetEventCodeTableData.push({
            eventName: key,
            resultValues: this.widgetEventCodeConfig[key].resultValues,
            remark: this.widgetEventCodeConfig[key].remark
          })
        }
      }
    },
    openFormItemEventCodeEditor(eventName) {
      this.$refs.formItemEventCodeEditor.init('交互事件【'+eventName+'】代码编辑', this.widgetEventCodeConfig[eventName].code, eventName, this.widgetEventCodeConfig[eventName].resultValues)
    },
    formItemEventCodeEditorConfirmHandler(obj) {
      this.widgetEventCodeConfig[obj.eventName].code = obj.code
    },
  },
  computed: {},
  watch: {}
}
</script>

<style scoped>
  >>> .ivu-table-body .ivu-table-row .ivu-table-cell {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
</style>
